<template>
  <div>
    <el-row type="flex" style="justify-content: center"
      ><el-col :span="15">
        <el-steps :space="200" :active="1" finish-status="success">
          <el-step title="提交订单"></el-step>
          <el-step title="支付订单"></el-step>
          <el-step title="平台发放"></el-step>
          <el-step title="确认收货"></el-step>
          <el-step title="完成评价"></el-step> </el-steps></el-col
    ></el-row>
    <el-row
      type="flex"
      style="
        padding: 20px 0;
        background-color: #ddd;
        justify-content: space-around;
      "
    >
      <el-col :span="4">
        <span style="color: red">当前订单状态：已关闭</span>
      </el-col>
      <el-col :span="4">
        <el-button>删除订单</el-button>
        <el-button>备注订单</el-button>
      </el-col>
    </el-row>
    <p>基本信息</p>
    <el-table :data="data" style="width: 100%">
      <el-table-column prop="dingdan" label="订单编号"> </el-table-column>
      <el-table-column prop="liushuihao" label="发货单流水号">
      </el-table-column>
      <el-table-column prop="user" label="用户账号"> </el-table-column>
      <el-table-column prop="zhifu" label="支付方式"> </el-table-column>
      <el-table-column prop="laiyuan" label="订单来源"> </el-table-column>
      <el-table-column prop="leixing" label="订单类型"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          laiyuan: "App订单",
          user: "list",
          zhifu: "未支付",
          leixing: "正常订单",
          liushuihao: "暂无",
        },
      ],
    };
  },
};
